<template>
	<view class="content">
		<view class="status">
			<text>{{orderDetail.statusDesc}}</text>
		</view>
		<view class="driver">
			<view class="img">
				<image :src="orderDetail.driver.avatar"></image>
			</view>
			<view class="info">
				<view class="info1">
					<text class="text1">{{orderDetail.driver.name|| '未知'}}</text>
					<text class="text2">{{orderDetail.car.cp}}</text>
				</view>
				<view class="info2">
<!--					<text class="text1">白色</text>-->
					<text class="text2">{{orderDetail.car.carType}}</text>
				</view>
			</view>
			<view class="tel">
				<image src="/static/order/tel.png" mode="widthFix" @tap="makePhone()"></image>
			</view>
		</view>
		<!-- 行程路线 -->
		<view class="xclx">
			<view class="title">
				<text>行程路线</text>
			</view>
			<view class="lc">
				<view class="addr">
					<view class="flag"></view>
					<view class="info">
						<view class="info1">
							<text>{{orderDetail.start_addr}}</text>
						</view>
						<view class="info2" v-if="false">
							<text>重庆重庆市-渝北区</text>
						</view>
					</view>
				</view>
				<view class="addr">
					<view class="flag flag2"></view>
					<view class="info">
						<view class="info1">
							<text>{{orderDetail.end_addr}}</text>
						</view>
						<view class="info2" v-if="false">
							<text>重庆重庆市-渝北区</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bh">
				<view class="left">
					<text>订单编号</text>
				</view>
				<view class="right">
					<text class="text1">{{orderDetail.order_sn}}</text>
					<text class="text2" @tap="copy()">复制</text>
				</view>
			</view>
			<view class="time">
				<view class="left">
					<text>订单时间</text>
				</view>
				<view class="right">
					<text>{{orderDetail.createtime}}</text>
				</view>
			</view>
		</view>
		<!-- 拍照回单 -->
		<view v-if="orderDetail.hdimages.length" class="pzhd">
			<view class="title">
				<text>拍照回单</text>
			</view>
			<view class="imgs">
				<image :src="item" v-for="item in orderDetail.hdimages" mode="widthFix"></image>
			</view>
		</view>
		<!-- 金额 -->
		<view class="money">
			<view class="left">
				<text>已支付</text>
			</view>
			<view class="right">
				<text>{{orderDetail.total}}元</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view v-if="false" class="btn">
			<text>再次呼叫</text>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request";
  import {baseUrl} from "@/common/api";

  export default {
		data() {
			return {
				mobile: '13566666666',
        orderId:0,
        orderDetail:{},
				//拍照回单
				hdImgs: ['/static/1.png','/static/1.png','/static/1.png','/static/1.png','/static/1.png'],
			}
		},
    onLoad(query) {
      this.orderId = query.id;
      this.getDetail();
    },
		methods: {
      baseUrl() {
        return baseUrl
      },
      getDetail(){
        request({
          url:'/d/order/detail',
          data:{
            orderSn:this.orderId

          }
        }).then(res=>{
this.orderDetail =  res.data;
        })
      },
			//拨打电话
			makePhone(){
				uni.makePhoneCall({
				    phoneNumber: this.orderDetail.driver.mobile || 10086, // 电话号码
				    success: function () {
				        console.log('拨打电话成功');
				    },
				    fail: function () {
						console.log('拨打电话失败');
				    }
				});
			},
			//复制
			copy(){
				uni.setClipboardData({
				    data: this.orderDetail.order_sn,
				    success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
				    }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 50rpx;
		.status{
			padding-top: 40rpx;
			line-height: 50rpx;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			padding-left: 40rpx;
		}
		.driver{
			margin: 40rpx 20rpx 0;
			padding: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			.img{
				width: 110rpx;
				height: 110rpx;
				image{
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
			}
			.info{
				margin-left: 20rpx;
				line-height: 40rpx;
				padding-top: 10rpx;
				.info1{
					.text1{
						font-weight: bold;
					}
					.text2{
						margin-left: 20rpx;
						color: #717171;
					}
				}
				.info2{
					margin-top: 10rpx;
					color: #717171;
					.text1{

					}
					.text2{

					}
				}
			}
			.tel{
				margin-left: auto;
				padding-top: 10rpx;
				image{
					width: 80rpx;
				}
			}
		}
		.xclx{
			margin: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.title{
				line-height: 50rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #FAFAFA;
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
			.lc{
				padding-left: 20rpx;
				padding-bottom: 60rpx;
				border-bottom: 1rpx solid #FAFAFA;
				.addr{
					margin-top: 30rpx;
					display: flex;
					.flag{
						margin-top: 10rpx;
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background-color: #00AF59;
					}
					.flag2{
						background-color: #FF4656;
					}
					.info{
						margin-left: 20rpx;
						line-height: 35rpx;
						.info1{

						}
						.info2{
							margin-top: 10rpx;
							color: #666;
						}
					}
				}
			}
			.bh{
				margin-top: 30rpx;
				line-height: 40rpx;
				display: flex;
				.left{
					color: #666;
				}
				.right{
					margin-left: auto;
					.text1{
						font-size: $uni-font-size-sm;
					}
					.text2{
						margin-left: 20rpx;
						color: #F35C5A;
					}
				}
			}
			.time{
				margin-top: 30rpx;
				line-height: 40rpx;
				display: flex;
				.left{
					color: #666;
				}
				.right{
					margin-left: auto;
				}
			}
		}
		.pzhd{
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx 20rpx 30rpx;
			border-radius: 20rpx;
			.title{
				line-height: 50rpx;
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
			.imgs{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				image{
					width: 150rpx;
					margin-bottom: 20rpx;
					margin-right: 10rpx;
					border-radius: 20rpx;
				}
			}
		}
		.money{
			margin: 20rpx;
			display: flex;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			line-height: 50rpx;
			padding: 25rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.left{}
			.right{
				margin-left: auto;
			}
		}
		.btn{
			margin: 100rpx auto 0;
			width: 700rpx;
			height: 120rpx;
			line-height: 120rpx;
			border-radius: 60rpx;
			text-align: center;
			background-color: #6C45D2;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			color: #fff;
			letter-spacing: 5rpx;
		}
	}
</style>
<style>
	page{
		background-color: #F1F5FD;
	}
</style>
